import React, { useCallback, useEffect, useState, useRef } from 'react';
import * as echarts from 'echarts/core';
import { LineChart, BarChart, MapChart } from 'echarts/charts'; // 导入折线图图表，图表后缀根据需要修改
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  GeoComponent,
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import css from './runtime.less';
import mapData from './test.json';

export default function ({ env, data, outputs }) {
  const chartRef = useRef(null);
  const [chart, setChart] = useState<any>(null);


  const drawChart = () => {
    
  }

  useEffect(() => {
    // 在这里初始化ECharts实例
    echarts.use([
      TitleComponent,
      TooltipComponent,
      GridComponent,
      GeoComponent,
      BarChart, // 确保这里使用了你需要的图表类型
      LineChart, // 确保这里使用了你需要的图表类型
      MapChart, // 确保这里使用了你需要的图表类型
      CanvasRenderer, // 使用Canvas渲染器
    ]);
    echarts.registerMap('neimeng', mapData);
    // 基于准备好的dom，初始化echarts实例
    const _chart = echarts.init(chartRef.current);
    setChart(_chart);
    const option = {
      z: 9,
      coordinateSystem: 'geo',
      geoIndex: 0,
      roam: true,
      tooltip: {
        show: false,
      },
      dataZoom: false,
      animation: false,
      symbolSize: [220, 170],
      series: [
        {
          name: '中国地图',
          type: 'map',
          map: 'neimeng',
          label: {
            show: true,
            formatter: '{b}',
            color: 'white' // 设置区域名称的颜色为白色
          },
          itemStyle: {
            normal: {
              areaColor: '#2878fc',
              borderColor: '#111',
            },
            emphasis: {}
          },
          data: []
        }
      ]
    };
    _chart.setOption(option);
    // 组件卸载时，清理资源
    return () => {
      _chart.dispose();
    };
  }, []);

  // 使得图表自适应屏幕大小变化
  // useEffect(() => {
  //   const resizeChart = () => {
  //     if (myChart) {
  //       myChart.resize();
  //     }
  //   };
  //   window.addEventListener('resize', resizeChart);
  //   return () => {
  //     window.removeEventListener('resize', resizeChart);
  //   };
  // }, []);

  return (
    <div
      ref={chartRef}
      className={css.area}
      style={data.style}
    >
    </div>
  );
}